<template>
	<view>
		<view class="content">

			<up-navbar title="选择审批流" :fixed="false" :autoBack="false" @leftClick="closeGlobalPopup"
				:safeAreaInsetTop="true" left-icon-color="#fff">
			</up-navbar>

			<view class="flex-auto" style="padding-top: 6px;">
				<up-radio-group v-model="choiceRadio" placement="column" iconPlacement="right" borderBottom
					@change="changeRadio">
					<up-radio v-for="(item,index) in radioData" :key="index" :customStyle="{padding: '10px'}"
						activeColor="#51d0d0" :label="item.BillName" :name="item.APFlowID"></up-radio>
				</up-radio-group>

			</view>

			<view class="content_bottom1 x-ec" :style="uni.$utils.disposeSafeBottomFun()">
				<button class="CommonBtnSize workBtn content_bottom_primary_plainBtn" @click="openView">预览</button>

				<button class="CommonBtnSize workBtn content_bottom_primary_Btn" :disabled="!enabledSubmitBtn"
					@click="cubmitConfig">确定</button>
			</view>

		</view>

		<!-- 预览 -->
		<up-popup id="popup-box1" :show="showViewPopup" mode="center" bgColor="transparent" overlayOpacity="0.1"
			:closeOnClickOverlay="false" @close="showViewPopup = false">
			<view class="f-dc"
				style="width: 80vw;max-height: 80vh;border-radius: 8px;overflow: hidden;min-height: 40vh;background-color: #fff;">
				<up-cell title="发起审批" style="background-color: #51d0d0;" :titleStyle="{color: '#fff',fontSize: '12px'}">
					<template slot="right-icon">
						<view @click="showViewPopup = false">
							<up-icon name="close" color="#fff" size="16"></up-icon>
						</view>
					</template>
				</up-cell>

				<mFlowCharts v-if="showViewPopup" ref="flowCharts" style="flex: 1;overflow: auto;"
					:option="flowChartData">
				</mFlowCharts>

				<view class="content_bottom1 x-ec" style="width: 100%;height: 60px;border-top: 1px solid #e8e8e8;">
					<button class="content_bottom_primary_plainBtn CommonBtnSize" size="mini"
						@click="showViewPopup = false;enabledSubmitBtn=true" style="margin-left: 10px;">取消</button>

					<button class="content_bottom_primary_Btn CommonBtnSize" :disabled="!enabledSubmitBtn" size="mini"
						@click="cubmitConfig" style="margin-left: 8px;">确定</button>
				</view>

			</view>
		</up-popup>

	</view>
</template>

<script setup lang="ts">
	import { computed, reactive, ref } from 'vue';
	import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useInventoryStore, useUserStore, usePermissionStore } from '@/store';
	const inventoryStore = useInventoryStore();
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();

	import mFlowCharts from "@/uni_modules/mc-ui/components/m-node-warp/components/m-flow-charts/m-flow-charts.vue";

	let UserInfo = userStore.UserInfo;

	let enabledSubmitBtn = ref(true);


	function closeGlobalPopup(type = 'cancel') {
		hide(type);
	};
	// 弹窗关闭后需要重置popupConfig数据
	function hide(type : any) {
		// 关闭弹窗
		inventoryStore.st_comPageConfig.showGlobalPopup = true;

		setTimeout(() => {
			inventoryStore.st_comPageConfig.showGlobalPopup = false;

			uni.navigateBack({
				delta: 1,
				success() {
					eventChannel.emit(type);
				}
			})

		}, 100);
	}

	function changeRadio() {


	};


	const showGlobalPopup = computed(() => {
		return inventoryStore.st_comPageConfig.showGlobalPopup
	});

	const radioData = computed(() => {
		return mainStore.BaseScreenParm.option || []
	});

	const globalData = computed(() => {
		return mainStore.BaseScreenParm.globalData || {}
	})

	const keyData = computed(() => {
		return {
			keyName: mainStore.BaseScreenParm.keyName,
			keyValue: mainStore.BaseScreenParm.keyValue,
		}
	})

	let showViewPopup = ref(false);
	let flowChartData = ref<any>(null)
	// 预览
	function openView() {
		if (uni.$utils.isEmpty(choiceRadio.value)) {
			return uni.$utils.msg('请选择审批流');
		};
		let findData = radioData.value.find((i : any) => i.APFlowID == choiceRadio.value);

		if (findData) {

			flowChartData.value = JSON.parse(findData.AppConfigStr);
			showViewPopup.value = true;
		}

	};

	let approveInfo = reactive<any>({});
	let choiceRadio = ref<any>(null);

	// 确认审批流
	function cubmitConfig() {
		if (!enabledSubmitBtn.value) return;
		enabledSubmitBtn.value = false;
		console.log(approveInfo);
		let param = {
			approveType: 0,
			tableName: globalData.value.physicalTableName,
			keyName: keyData.value.keyName,
			keyId: keyData.value.keyValue,
			APFlowID: approveInfo.APFlowID,
			userId: UserInfo.UserID,
			title: approveInfo.BillName
		}
		console.log(param);

		post("", param, function (ret : any) {
			console.log(ret);
			uni.$utils.msg(ret.data?.ds[0].msg);
			closeGlobalPopup('confirm');
		}, function (err : any) {
			console.log(err);
		})

	};
	function post(sql : string, param ?: any, callBack ?: any, failCallBack ?: any) {
		param["sql"] = sql;


		if (!uni.$utils.isEmpty(UserInfo)) {

			if (!param.hasOwnProperty("P_UserID")) {
				param.P_UserID = UserInfo.UserID;
			}
			if (!param.hasOwnProperty("P_UserName")) {
				param.P_UserName = UserInfo.UserName;
			}
			if (!param.hasOwnProperty("P_UserCode")) {
				param.P_UserCode = UserInfo.UserCode;
			}
		};
		requestByUrl({
			config: { baseURL: "/Approve/BgApproval" },
			url: '',
			method: 'POST',
			data: param,
			success(ret : any) {
				callBack && callBack(ret);
			},
			fail(err : any) {

				failCallBack && failCallBack(err)
			}
		});
	};



	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1] as any;
	const eventChannel = currentPage.getOpenerEventChannel()

	onLoad(() => {
		if (radioData.value.length) {
			Object.assign(approveInfo, radioData.value[0]);
			choiceRadio.value = radioData.value[0].APFlowID;
		}
	});

	onUnload(() => {
		eventChannel.emit("cancel");
	})
</script>

<style lang="scss">
	/* #ifdef MP-WEIXIN */
	view {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* #endif */

	.content_bottom1 {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		// height: 44px;
		// line-height: 70px;
		padding: 6px 15px;
		border-top: 1px solid #efefef;

		.workBtn {
			border-color: #ddd !important;
			margin-left: 10px !important;

			&.small-font {
				font-size: 12px !important;
			}

			&:not(.small-font) {
				font-size: 14px;
			}
		}
	}
</style>